<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>

		<link rel="stylesheet" href="/css/common.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />

		<!-- 乾鑫管道网站建设时，用到 -->

		<style>
			.bg-trans_item:hover {
				background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
				--bs-bg-opacity: 0.25;
			}
			.bg-trans:nth-of-type(1) .bg-image {
				opacity: 1 !important;
				visibility: visible;
				transition: all 0.3s;
			}
			.bg-trans .bg-image {
				opacity: 0 !important;
				visibility: hidden;
				transition: all 0.3s;
			}
			.bg-trans:hover .bg-image {
				opacity: 1 !important;
				visibility: visible;
				transition: all 0.3s;
			}
			.bg-trans_item:hover {
				background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
			}
		</style>
	</head>

	<body class="vh-100">
		<!-- pc -->
		<div class="vh-100 position-relative d-none d-md-block">
			<div class="row row-cols-1 row-cols-sm-4 h-100 g-0">
				<a class="col h-100 border-end border-white bg-trans">
					<div class="p-5 h-100 d-flex">
						<div class="pt-sm-8r ps-sm-12 flex-fill bg-trans_item tran_0_5 p-5">
							<img class="w-35 mb-16" src="//qn1.10soo.net/assets24/202405071557126.svg" alt="" />
							<p class="fs-4 text-white fw-bold mb-0">市政工程管道</p>
						</div>
					</div>

					<img class="position-absolute top-0 start-0 z-n1 bg-image w-100 h-100 object-fit" src="//qn1.10soo.net/assets24/202405101106358.png" alt="" srcset="" />
				</a>
				<a class="d-block col h-100 border-end border-white bg-trans">
					<div class="p-5 h-100 d-flex">
						<div class="pt-sm-8r ps-sm-12 flex-fill bg-trans_item p-5">
							<img class="w-35 mb-16" src="//qn1.10soo.net/assets24/202405071614708.svg" alt="" />
							<p class="fs-4 text-white fw-bold mb-0">电力通讯管道</p>
						</div>
					</div>
					<img class="position-absolute w-100 top-0 start-0 z-n1 bg-image w-100 h-100 object-fit" src="//qn1.10soo.net/assets24/202405101106926.png" alt="" srcset="" />
				</a>
				<a class="col h-100 border-end border-white bg-trans">
					<div class="p-5 h-100 d-flex">
						<div class="pt-sm-8r ps-sm-12 flex-fill bg-trans_item tran_0_5 p-5">
							<img class="w-35 mb-16" src="//qn1.10soo.net/assets24/202405071615833.svg" alt="" />
							<p class="fs-4 text-white fw-bold mb-0">建筑家装管道</p>
						</div>
					</div>

					<img class="position-absolute w-100 top-0 start-0 z-n1 bg-image w-100 h-100 object-fit" src="//qn1.10soo.net/assets24/202405101106182.png" alt="" srcset="" />
				</a>
				<a class="col h-100 border-end border-white bg-trans">
					<div class="p-5 h-100 d-flex">
						<div class="pt-sm-8r ps-sm-12 flex-fill bg-trans_item tran_0_5 p-5">
							<img class="w-35 mb-16" src="//qn1.10soo.net/assets24/202405071615671.svg" alt="" />
							<p class="fs-4 text-white fw-bold mb-0">农业灌溉管道</p>
						</div>
					</div>
					<img class="position-absolute w-100 top-0 start-0 z-n1 bg-image w-100 h-100 object-fit" src="//qn1.10soo.net/assets24/202405101106407.png" alt="" srcset="" />
				</a>
			</div>
		</div>
	</body>
</html>
